<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>登录</title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
				display: flex;
				background: linear-gradient(to bottom,#3fccf0,#DBB1FB);
				padding: 20px;
				justify-content: center;
			}
			.container input {
				color: #ff4081;
			}
			.login-head{
				margin-top: 20%;
				width: 100%;
				text-align: center;
			}
			.icon-denglu{
				color: #fff;
				font-size: 70px;
			}
		</style>
	</head>
	<body>
		<div id="body">
			<mu-container>
				<div>
					<div class="login-head">
						<span style="font-size: 28px;color: #FFFFFF;text-shadow: 5px 5px 5px black">天燃气智能收费APP</span>
						<div class="iconfont icon-denglu"></div>
					</div>
					<mu-text-field type="number" v-model="login.userName" color="secondary" label="手机号" label-float></mu-text-field>
					<br />
					<mu-text-field type="password" color="secondary" v-model="login.password" label="密码" label-float></mu-text-field>
					<br />
					 <mu-button color="secondary" full-width @click="loginClick" >登录
					  <mu-icon value="arrow_forward" right></mu-icon>
					 </mu-button>
					<div style="display: flex;justify-content: space-between;margin-top: 15px;">
						<mu-button color="secondary" flat  @click="util.openWindow('forgertPassword.html',false)">忘记密码？</mu-button>
						<mu-button color="secondary" flat @click="util.openWindow('accountApply.html',false)">申请开户</mu-button>
					</div> 
				</div>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					login: {
						userName: '18996245667',
						password: '302295'
					}
				}
			},
			methods:{
				loginClick(){
					if(util.isNull(this.login.userName)){
						util.tip("请输入手机号！")
						return;
					}
					if(util.isNull(this.login.password)){
						util.tip("请输入密码！")
						return;
					}
					var params = {
						"username":this.login.userName,
						"password":this.login.password
					}
					util.ajax("/login",params,data=>{
						if(data.code==0){
							util.tip(data.msg)
						}else{
							util.setData('isLogin',true)
							util.setData('token',data.token)
							var indexWebView = plus.webview.getLaunchWebview()
							indexWebView.evalJS("init();");
							util.back()
						}
					},true)
				}
			}	
		})
		var quitFlag = false;
		document.addEventListener('plusready', function() {
// 			mui.back = function () {
// 				if(quitFlag){
// 					plus.runtime.quit();
// 				}else{ 
// 					util.tip("再按一次退出");
// 					quitFlag = true;
// 					setTimeout(()=>{
// 						quitFlag = false;
// 					},1500)
// 				}
// 			}
		});
	</script>
</html>
